<template>
  <div class="section-container-4">
    <div class="header">
      <bannerHeader
        @open="open"
        title1="近日明细"
        title2="Details"
        :isCheck="false"
        unit="( 万元 )"
      />
    </div>
    <div class="show-body">
      <div class="detailed-main">
        <div
          class="detailed-list"
          v-for="(item, index) in todayList"
          :key="index"
          :class="{ 'detailed-list-active': active >= index }"
        >
          <div class="tag">{{ item.accountFundTypeName[0] }}</div>
          <div class="banner">
            <div class="banner-content">
              <div class="top">
                <label>{{ item.deptName }}</label>
                <span v-if="item.accountType === 1" class="green-1"
                  >+ {{ formatNumber(item.accountAmount) }}</span
                >
                <span v-else class="red-1"
                  >- {{ formatNumber(item.accountAmount) }}</span
                >
              </div>
              <div class="bottom">
                <label>{{ item.accountFundTypeName }}</label>
                <span>{{ item.fundAccountName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bannerHeader from "../banner-header-right";
import request from "@/utils/request";
import Qs from "qs";
import { mapState } from "vuex";
import UIfn from "./popup";
export default {
  components: {
    bannerHeader,
  },
  data() {
    return {
      todayList: [],
      sourceList: [],
      active: -1,
      form: {},
      timer: null,
    };
  },
  filters: {
    filaccountAmount(val) {
      return (val / 10000).toFixed(4) || 0;
    },
  },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
  },
  watch: {
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          window.clearInterval(this.timer);
          this.screenTodayFlow(); // 当日明细
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          window.clearInterval(this.timer);
          this.screenTodayFlow(); // 当日明细
        });
      },
    },
  },
  created() {
    // this.screenTodayFlow(); // 当日明细
  },
  methods: {
    open() {
      UIfn(this);
    },
    init(msg) {
      this.form = msg;
      // console.log(this.todayList, 56);
      this.active++;
      if (this.active > this.sourceList.length) {
        this.active = 0;
        this.todayList.splice(0, this.sourceList.length);
        this.todayList = [...this.todayList, ...this.sourceList];
        // console.log(123, this.todayList);
      }
    },
    screenTodayFlow() {
      request({
        url: "system/screen/todayFlow",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          projectId: this.projectId,
        }),
      }).then((res) => {
        this.sourceList = res.data;
        this.todayList = this.sourceList;
        this.todayList = [...this.todayList, ...this.sourceList];
        this.timer = setInterval(() => {
          requestAnimationFrame(this.init);
        }, 4000);
        this.$once("hook:beforeDestroy", () => {
          window.clearInterval(this.timer);
        });
      });
    },
    formatNumber(num) {
      if (!num) {
        return "0.00";
      }
      let str = String(num).split(".");
      let num1 = str[0];
      let num2 = `${str[1]}`;
      if (str[1]) {
        let data = `${str[1]}`;
        if (data.length > 2) {
          data = data.slice(0, 2);
        }
        if (data.length === 1) {
          data = `${data}0`;
        }
        num2 = `.${data}`;
      } else {
        num2 = ".00";
      }
      let reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (num1 + "").replace(reg, "$&,") + `${num2}`;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.section-container-4 {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: vh(42);
  }

  .show-body {
    width: 100%;
    height: calc(100% - #{vh(42)});

    .detailed-main {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .detailed-list {
        width: 100%;
        height: vw(63);
        display: flex;
        flex-direction: row;
        align-items: center;

        &:nth-child(2n) {
          background: rgba(255, 255, 255, 0.06);
        }

        &-active {
          height: 0;
          overflow: hidden;
          animation: move 0.5s;
        }

        .tag {
          width: vw(28);
          height: vw(28);
          background: rgba(238, 200, 84, 1);
          border-radius: vw(4);
          font-size: vw(16);
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          line-height: vw(28);
          text-align: center;
          color: #000000;
        }

        .banner {
          flex-grow: 1;
          height: 100%;
          padding: 0 vw(5);

          &-content {
            width: 100%;
            height: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .top,
            .bottom {
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            }

            .top {
              label {
                font-size: vw(14);
                font-family: Microsoft YaHei UI;
                font-weight: bold;
                color: rgba(143, 199, 255, 0.8);
              }

              .green-1 {
                font-size: vw(18);
                font-family: Bahnschrift;
                font-weight: 400;
                color: rgba(31, 197, 87, 1);
              }

              .red-1 {
                font-size: vw(18);
                font-family: Bahnschrift;
                font-weight: 400;
                color: rgba(31, 197, 87, 1);
                color: #ef5a4f;
              }
            }

            .bottom {
              label {
                font-size: vw(14);
                font-family: Microsoft YaHei UI;
                font-weight: 400;
                color: rgba(143, 199, 255, 0.4);
              }

              span {
                font-size: vw(12);
                font-family: Microsoft YaHei UI;
                font-weight: 400;
                color: rgba(143, 199, 255, 0.4);
              }
            }
          }
        }
      }
    }
  }
}

@keyframes move {
  0% {
    height: 60px;
  }

  100% {
    height: 0;
  }
}
</style>